<template>
  <main-card title="算法列表" :tabs="getTabs()" :show-screen-space="false" :online-lab="true">
    <template #tool-btn><div class="h-36"></div> </template>
    <div class="top-tab">
      <span :class="['tad', { 'tad--active': activeTab === 1 }]" @click="changeTab(1)">我的算法</span>
      <span :class="['tad', { 'tad--active': activeTab === 2 }]" @click="changeTab(2)">预置算法</span>
    </div>
    <div class="mb-16 fbc pt-12 pb-12">
      <div class="flex gap-8">
        <g-input
          v-model:value="pageForm.name"
          :search="true"
          class="h-36"
          allow-clear
          placeholder="请输入名称"
          style="width: 268px"
          @keyup.enter="search()"
        />
        <a-select v-model:value="pageForm.type" class="w-140" :options="typeOptions" @change="search()" />
      </div>
      <div class="flex gap-x-8">
        <a-button type="text" class="icon-with-btn w34 h36" @click="exportListDrawerStore.openDrawer()">
          <i class="iconfont icon-menu-add-line"></i>
        </a-button>
        <a-button v-if="activeTab === 1" type="primary" @click="createAlgo">创建算法</a-button>
      </div>
    </div>
    <defaultAlgoList v-if="activeTab === 2" ref="defaultAlgoListRef" @changeTab="changeTab" />
    <customAlgoList v-if="activeTab === 1" ref="customAlgoListRef" />
    <exportListDrawer />
  </main-card>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import MainCard from '@/components/MainCard/index.vue'

  import { ALGO_TYPE_OPTIONS } from '../../options'
  import { getTabs } from '../../utils'
  import customAlgoList from '../components/customAlgoList.vue'
  import defaultAlgoList from '../components/defaultAlgoList.vue'
  import exportListDrawer from '../components/ExportListDrawer/index.vue'
  import { useExportListDrawer } from '../components/ExportListDrawer/store'

  type PageForm = {
    name: string
    type: number | string | undefined
  }

  const router = useRouter()
  const route = useRoute()
  const exportListDrawerStore = useExportListDrawer()

  const defaultAlgoListRef = ref()
  const customAlgoListRef = ref()

  const pageForm = ref<PageForm>({
    name: '',
    type: ''
  })

  const activeTab = ref<number>(1)

  // 类型
  const typeOptions = ref([
    {
      label: '全部类型',
      value: ''
    },
    ...ALGO_TYPE_OPTIONS
  ])

  const changeTab = (index: number) => {
    if (index === activeTab.value) {
      return
    }
    pageForm.value = {
      name: '',
      type: ''
    }
    activeTab.value = index
    router.push({ query: { activeTab: activeTab.value } })
    search()
  }

  const createAlgo = () => {
    router.push('/algo-dev/algo-manage/add')
  }

  const search = () => {
    if (activeTab.value === 1) {
      customAlgoListRef.value?.search({ ...pageForm.value, offset: 1 })
      return
    }
    defaultAlgoListRef.value?.search({ ...pageForm.value, offset: 1 })
  }

  onMounted(() => {
    if (route.query.activeTab) {
      activeTab.value = Number(route.query.activeTab)
      return
    }
    router.push({ query: { activeTab: activeTab.value } })
  })
</script>

<style lang="less">
  .top-tab {
    display: flex;
    padding-bottom: 12px;
    height: 34px;
    gap: 40px;

    .tad {
      height: 22px;
      font-size: 14px;
      color: @text02;
      font-weight: 400;
      cursor: pointer;

      &--active {
        position: relative;
        color: @text01;
        font-weight: 700;

        &::after {
          position: absolute;
          bottom: -6px;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: @primary1;
          content: '';
        }
      }
    }
  }
</style>
